<template>
  <view class="page-main">
    <view class="background-image">
      <view class="device-status_bar">
        <!-- 这里是手机本身的状态栏 -->
      </view>
<!--      <view class="custom-nav-bar">
        <view class="left-button" @click="black"> </view>
      </view> -->
      <view class="title-wrapper">
        <view class="title1">REPORT CENTRE</view>
        <view class="title2">举报中心</view>
      </view>
    </view>
    <view class="part1">
      <view class="title" style="margin-bottom: 20rpx;text-align: center;font-weight: bold;">当前举报管家：{{name}}</view>
      <view class="title">举报类型</view>
      <view class="questions-wrapper">
        <view
        :class="{'gettype':i===type}"
          class="question-item"
          v-for="(item,i) in typeList"
          :key="item"
          @click="getType(i)"
        >
          {{item}}
        </view>
      </view>
    </view>
    <view class="helpQuestion2">
      <view class="title">提交举报</view>
      <textarea
        class="text-area"
        v-model="questionToSubmit"
        value=""
        placeholder="请输入您的举报内容"
      />

      <view class="upload-image">
        <view class="uni-uploader-body">
          <view class="u-demo-area">
            <u-toast ref="uToast"></u-toast>
            <view class="pre-box" v-if="!showUploadList">
              <view
                class="pre-item"
                v-for="(item, index) in uploadedPhotoList"
                :key="index"
              >
                <image
                  class="pre-item-image"
                  :src="item.url"
                  mode="aspectFill"
                ></image>
                <view class="u-delete-icon" @tap.stop="deleteItem(index)">
                  <u-icon name="close" size="20" color="#ffffff"></u-icon>
                </view>
                <u-line-progress
                  v-if="item.progress > 0 && !item.error"
                  :show-percent="false"
                  height="16"
                  class="u-progress"
                  :percent="item.progress"
                ></u-line-progress>
              </view>
            </view>
            <text class="upload-image-tips">（单个图片最大4MB）</text>
            <u-upload
              class="u-upload"
              width="164"
              height="164"
              @on-choose-fail="onChooseFail"
              :before-remove="beforeRemove"
              ref="uUpload"
              :custom-btn="customBtn"
              :show-upload-list="showUploadList"
              :max-size="4 * 1024 * 1024"
              :action="action"
              :auto-upload="autoUpload"
              :file-list="fileList"
              :show-progress="showProgress"
              :deletable="deletable"
              :max-count="maxCount"
              @on-list-change="onListChange"
            >
              <view
                v-if="customBtn"
                slot="addBtn"
                class="slot-btn"
                hover-class="slot-btn__hover"
                hover-stay-time="150"
              >
                <u-icon
                  name="photo"
                  size="60"
                  :color="$u.color['lightColor']"
                ></u-icon>
              </view>
            </u-upload>
          </view>
        </view>
      </view>

      <view @click="toSubmit" class="blue-wide-button" style="margin: 0 auto"
        >确认提交</view
      >
    </view>
  </view>
</template>

<script>
import { ONLINE_SERVER_ADDRESS_BASE,baseApi_, getHeaderForPost, tokenRequest, uniRequest } from '../../util/network';
import { d_uniShowToast, ROUTER_OBJ, TOAST_DURATION, uniNavigate } from '../../util/misc';
import { TESTING } from '../../util/test';
// import { appMixin } from '../../util/reuse';
import { imageMixin } from '../../util/reuse/imageMixin';
import { uniSetStorageSync, uniSwitchTab } from '../../util/funcs';
import { failCbObject, uniHideLoading, uniShowLoading } from '../../util/commonFuncs';
export default {
  mixins: [imageMixin],
  components: {},
  data() {
    return {
      typeList:['发布色情/违法信息','言语使用不当','存在其他违规行为'],
      questions: [
        {
          id: 1,
          title: '',
        },
      ],
      questionToSubmit: '',
      imageList: [],
      type:'',
      id:'',
      name:'',
    };
  },
  onLoad(obj){
    console.log(obj)
    if(obj.id){
      this.id = obj.id
      this.name = obj.name
    }
  },
  methods: {
    black(){
      uni.navigateBack()
    },
    getType(i){
      console.log(i)
      this.type = i
    },
    toDetail(question) {
      uniSetStorageSync(ROUTER_OBJ, question);
      uniNavigate('/textDetails');
    },
    onListChange(lists) {
      this.imageList = lists; // [{url: 'blob'}]
    },

    async toSubmit() {
      if (!TESTING) uniShowLoading();
      let imageAmount = this.imageList.length;
      if (this.type==='') {
        d_uniShowToast({
          title: '请选择举报类型',
        });
        return;
      }
      this.postQuestion();
    },
    postQuestion() {
		d_uniShowToast({
		  title: '举报成功, 跳转中',
		});
		setTimeout(() => {
			uni.switchTab({
				url:'/pages/managerMsg/managerMsg'
			})
		}, TOAST_DURATION);
   //    let postData = {
   //      content: this.questionToSubmit,
   //      business_id:this.id,
   //      type:this.type+1
   //    };
   //    this.imageList = this.imageList.map((item, imageIndex) => {
   //      let obj = { ...item };
   //      obj.name = `report_files[${imageIndex}]`;
   //      obj.uri = obj.url;
   //      return obj;
   //    });
   //    // let tUrl = baseApi_('/user_report');
	  // let tUrl = `${ONLINE_SERVER_ADDRESS_BASE}/user_report`
   //    // console.log(tUrl);
   //    let finalOpt = {
   //      header: getHeaderForPost(),
   //      url: tUrl,
   //      files: this.imageList,
   //      formData: postData
   //    };
   //    // console.log(finalOpt);
   //    // return;

   //    if (finalOpt.files.length >= 1) {
   //      console.log(4)
   //      uni.uploadFile({
   //        ...finalOpt,
   //        success: ({ data }) => {
   //          uniHideLoading();
   //          console.log(data);
   //          try {
   //            this.$refs.uUpload.clear();
   //          } catch (e) {
   //            console.log(e);
   //          }
   //          let resData = { msg: '提交失败', code: 400 };
   //          if (typeof data == 'string') {
   //            resData = JSON.parse(data);
   //          } else {
   //            resData = data;
   //          }
   //          if (resData.code === 200) {
   //            d_uniShowToast({
   //              title: '举报成功, 跳转中',
   //            });
   //            setTimeout(() => {
   //              uniSwitchTab('/my/my');
   //            }, TOAST_DURATION);
   //          } else {
   //            uniHideLoading();
   //            d_uniShowToast({
   //              title: resData.msg,
   //            });
   //          }
   //        },
   //        ...failCbObject('提交失败'),
   //      });
   //    } else {
   //      console.log(4)
   //      // delete finalOpt.fileType
   //      // delete finalOpt.fileType
   //      tokenRequest('/user_report', postData, {
   //        // ...successOpt,
   //        success:res=>{
   //          uniHideLoading();
   //          if(res.data.code==200){
   //            d_uniShowToast({
   //              title: '举报成功, 跳转中',
   //            });
   //            setTimeout(() => {
   //              uniSwitchTab('/my/my');
   //            }, TOAST_DURATION);
   //          }else{
   //            d_uniShowToast({
   //              title: res.data.msg,
   //            });
   //          }
   //        },
   //        ...failCbObject('操作失败'),
   //      });
   //    }
    },
    back() {
      uni.navigateBack();
    },
  },
  mounted() {
    // uniHideLoading();
    // uniRequest(
    //   '/help',
    //   {},
    //   {
    //     success: ({ data }) => {
    //       this.questions = data.data;
    //     },
    //   }
    // );
  },
};
</script>

<style scoped lang="scss">
@import '../../assets/styles/global';
.gettype{
  background-color: #004FBF !important;
  color: #FFFFFF !important;
}
.helpQuestion2 {
  padding: 15px 15px 25px 15px;
  background: white;

  .title {
    height: 20px;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0px;
    color: #06121f;
    font-weight: bold;
  }

  .text-area {
    width: 91vw;
    height: 30vw;
    margin: 15px auto;
    padding: 12px 14px;
    @include borderBox;
    border: 1px solid #c8c9cc;
    font-size: 4vw;
    line-height: 24px;
    color: #969799;
  }

  .but {
    width: 300px;
    height: 40px;
    border-radius: 20px;
    background-image: linear-gradient(to right, #2667ba, #0b4daa);
    text-align: center;
    font-size: 14px;
    color: #ffffff;
    line-height: 40px;
    margin: 0 auto;
    box-shadow: 0 0 3px 1px #105fc4;
  }

  .upload-image {
    margin-bottom: 15px;
    .upload-image-tips {
      font-size: 11px;
      color: grey;
      padding-left: 4px;
    }
  }
}
</style>

<style lang="scss" scoped>
@import '../../assets/styles/global';

.page-main {
}
</style>

<style lang="scss" scoped>
@import '../../assets/styles/global';

.background-image {
  @include body-background-image;
  height: 200px;
  background-image: url('../../static/images/helpCenter/bg_img@3x.png');

  .custom-nav-bar {
    .left-button {
      background-image: url('../../static/images/back-icon@3x.png');
    }
  }

  .title-wrapper {
    @include center;
    flex-direction: column;
    height: 65px;
    .title1 {
      height: 50rpx;
      font-family: Helvetica;
      font-size: 36rpx;
      font-weight: normal;
      font-stretch: normal;
      line-height: 50rpx;
      letter-spacing: 0rpx;
      color: #ffffff;
      margin-bottom: 10rpx;
    }

    .title2 {
      width: 112rpx;
      height: 50rpx;
      font-size: 28rpx;
      font-weight: normal;
      font-stretch: normal;
      line-height: 50rpx;
      letter-spacing: 0rpx;
      color: #ffffff;
    }
  }
}

.part1 {
  padding: 15px;
  margin-top: -35rpx;
  border-top-left-radius: 17px;
  border-top-right-radius: 17px;
  background-color: white;
  min-height: 150px;
  overflow-y: scroll;
  border-bottom: 8px solid $greyBackgroundColor;

  .title {
    margin-bottom: 14px;
  }

  .questions-wrapper {
    display: flex;
    flex-wrap: wrap;
    overflow-y: scroll;
    .question-item {
      margin-right: 10px;
      @include center;
      height: 30px;
      background-color: #ebedf0;
      border-radius: 4rpx;
      color: #06121f;
      font-size: 28rpx;
      @include borderBox;
      padding: 0 12px;
      line-height: 30px;
      max-width: 95vw;
      margin-bottom: 10px;
      margin-left: 10px;
      @include myEllipsis;
    }
  }
}
</style>
